/**
 * Created by huotaol on 2017/4/19.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import customStyle from "../style/CustomStyle.js";

/*配合react-native-scrollable-tab-view 库 标题切换*/
export default class TabBar extends Component {
    static propTypes = {
        goToPage: PropTypes.func, // 跳转到对应tab的方法
        activeTab: PropTypes.number, // 当前被选中的tab下标
        tabs: PropTypes.array, // 所有tabs集合

        tabNameList: PropTypes.array, // 保存Tab名称
        tabIconList: PropTypes.array, // 保存Tab图标
        tabIconSelList: PropTypes.array,//tab选中图标
    }

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    renderTabOption(tab, i) {
        const selected = this.props.activeTab === i;// 判断i是否是当前选中的tab，设置不同的颜色
        const color = selected ? "#ffc000" : "#8c7a44";
        const image = selected ? this.props.tabIconSelList[i] : this.props.tabIconList[i];
        return (
            <TouchableOpacity onPress={() => this.props.goToPage(i)} style={styles.tab}>
                <View style={styles.tabItem}>
                    <View style={{
                        height: customStyle.getActualSizeInVertical(60),
                        width: customStyle.getActualSizeInHorizontal(60),
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <Image
                            style={[styles.tabIcon]}
                            source={image}
                            resizeMode='contain'
                        />
                    </View>
                    <Text style={{
                        color: color,
                        marginTop: customStyle.getActualSizeInVertical(2),
                        fontSize: customStyle.getActualFontSize(20),
                    }}>
                        {this.props.tabNameList[i]}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View style={styles.tabs}>
                {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    }
}


const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
        height: customStyle.footerHeight,
    },

    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderTopWidth: 1,
        borderTopColor: '#ede9dd',
    },

    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },
    tabIcon: {
        height: customStyle.getActualSizeInVertical(52),
        width: customStyle.getActualSizeInHorizontal(52),
    },
});